<template>
    <div>
    <el-table
            :data="tableData"
            stripe
            style="width: 100%">
        <el-table-column
                prop="key"
                label="用户名"
                width="180">
        </el-table-column>
        <el-table-column>
            <template slot="header" slot-scope="scope">
                <el-button @click="insertDialogFormVisible = true">
                    新增
                </el-button>
                <el-dialog title="添加选课"
                           :visible.sync="insertDialogFormVisible"
                           :before-close="handleClose">
                    <el-form :model="RedisFrom" status-icon ref="AchievementForm">
                        <el-form-item label="键:" :label-width="formLabelWidth" prop="key">
                            <el-input v-model="RedisFrom.key" autocomplete="off" style="width: 300px"></el-input>
                        </el-form-item>
                        <el-form-item label="值:" :label-width="formLabelWidth" prop="value">
                            <el-input v-model="RedisFrom.value" autocomplete="off" style="width: 300px"></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button @click="insertDialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="addRedis('RedisFrom')">确 定</el-button>
                    </div>
                </el-dialog>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="openHandleDelete(scope.$index, scope.row)">删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-footer>
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="page.currentPage"
                    :page-sizes="[10, 20, 30, 40]"
                    :page-size="page.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="totals">
            </el-pagination>
        </div>
    </el-footer>
    </div>
</template>

<script>
    import Templates from "@/components/Templates";

    export default {
        name: 'Redis',
        components: {Templates},
        data() {
            return {
                tableData: [],
                RedisFrom: {},
                //弹窗大小
                formLabelWidth: '120px',
                insertDialogFormVisible: false,

                totals: 45,
                page:{
                    pageSize:10,
                    currentPage:1,
                },
            }
        },
        methods: {
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            openHandleDelete(index, row) {
                console.log(index)
                console.log(row)
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                    this.handleDelete(index, row)
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除',
                    });
                });
            },
            handleDelete(index, row) {
                this.axios.delete('http://120.26.99.230:8092/redis/del', {
                    params: {
                        key: row.key
                    }
                }).then(res => {
                    console.log(res)
                    if (res.data.is == true) {
                        this.getRedisPage()
                        this.tableData = res.data.data
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            },
            addRedis(RedisFrom) {
                this.axios.post('http://120.26.99.230:8092/redis/add', this.RedisFrom).then(res => {
                    console.log(res)
                    if (res.data.is == true) {
                        this.tableData = res.data.data
                        this.$message.success(res.data.msg);
                        this.getRedisPage()
                        this.insertDialogFormVisible = false
                        this.RedisFrom.key = ''
                        this.RedisFrom.value = ''
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            },
            getRedisPage() {
                this.axios.get('http://120.26.99.230:8092/redis/redisPage').then(res => {
                    console.log(res)
                    if (res.data.is == true) {
                        this.tableData = res.data.data
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                })
            }
        },
        mounted() {
            this.getRedisPage()
        },
    }
</script>